<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <meta charset="UTF-8">
		<title>卫生信息</title>
		<link rel="stylesheet" href="./layui/css/layui.css" />
		<script type="text/javascript" src="./layui/layui.js" ></script>
	</head>
	<body>
		<div class="layui-container">
			<fieldset class="layui-field-title layui-elem-field">
				<legend>卫生录入</legend>
			</fieldset>
				<form class="layui-form">
					<div class="layui-form-item">
						<label class="layui-form-label">所在楼层：</label>
						<div class="layui-input-inline">
							<select name="floor_number" lay-filter="floor_number" name="floor_number">
								<option value="0">请选择楼层</option>
							  	<option value="1">一楼</option>
							  	<option value="2">二楼</option>
							  	<option value="3">三楼</option>
							  	<option value="4">四楼</option>
							  	<option value="5">五楼</option>
							  	<option value="6">六楼</option>
							</select>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">宿舍号：</label>
						<div class="layui-input-inline">
							<select name="dorm_number" lay-filter="dorm_number" id="dorm_number">
								<option value=""></option>
							</select>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">扣分项目：</label>
						<div class="layui-input-block" id="deduction"></div>
					</div>
										
					<div class="layui-form-item">
						<label class="layui-form-label">总扣分值：</label>
						<div class="layui-input-inline">
							<input type="number"  name="t_value"  autocomplete="off" placeholder="总扣分值" class="layui-input"   required lay-verify="required"/>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">卫生类型：</label>
						<div class="layui-input-inline">
							<select name="health_type"  required lay-verify="required">
								<option value="">请选择卫生类型</option>
								<option value="大扫除">大扫除</option>
								<option value="日常卫生">日常卫生</option>
							</select>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">卫生等级：</label>
						<div class="layui-input-inline">
							<select name="health_grade"  required lay-verify="required">
								<option value="">请选择卫生等级</option>
								<option value="A">A</option>
								<option value="B">B</option>
								<option value="C">C</option>
								<option value="D">D</option>
							</select>
						</div>
					</div>
					<div class="layui-form-item layui-form-text">
						<label class="layui-form-label">备注：</label>
						<div class="layui-input-block">
							<textarea name="remarks"  placeholder="请输入" class="layui-textarea"></textarea>
						</div>
					</div>
					<div class="layui-form-item">
    					<div class="layui-input-block">
						    <button class="layui-btn" type="submit" lay-submit lay-filter="formSubm">提交</button>
						    <button class="layui-btn" type="button" lay-submit="" lay-filter="formLog" >Log</button>
						    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    					</div>
  					</div>
				</form>
			
		</div>
		<script type="text/javascript">
			var tagData = [
							{"id":1,"name":"走廊不干净"},
							{"id":2,"name":"门窗有灰"},
							{"id":3,"name":"地板未清扫"},
							{"id":4,"name":"风扇有灰"},
							{"id":5,"name":"厕所不干净"}
						];
			layui.config({
    			base : './'
  		}).extend({
			    selectM: '	./layui_extends/selectM',
  			}).use(['layer','form','jquery','selectM'],function(){
				var form = layui.form,
				$ = layui.jquery,
				
				selectM = layui.selectM;
				//扣分项  选项
				var deduction = selectM({
					//元素容器【必填】
				    elem: '#deduction'
				    //候选数据【必填】
				    ,data: tagData
				    ,width:400
				    //添加验证
				    ,verify:'required'      
				});
				//监听log按钮
				form.on('submit(formLog)',function(data){
					console.log('tagIns1 当前选中的值名：',deduction.selected);
				    console.log('tagIns1 当前选中的值：',deduction.values);
				    console.log('tagIns1 当前选中的名：',deduction.names);      
				    console.log('');
				    var formData = data.field;
				    console.log('表单对象：',formData);
				});
				//监听提交按钮
				form.on('submit(formSubm)',function(data){
					//扣分明细
				    var deductions = "";
				    for(var i = 0;i < deduction.names.length;i++){
				    	deductions+=deduction.names[i]+",";
				    }
				    var obj = data.field;
				   obj["deduction"] = deductions;
				    
				    obj = JSON.stringify(obj);
				    console.log(obj);
				    inputHealthInfo(obj);
				    return false;
				});
				
				//联动菜单
				form.on('select(floor_number)',function(data){
					//获取option选中值
					console.log(data.value); //得到被选中的值
					var value = data.value;
					$.ajax({
						type:"get",
						url:"addHealthInfoAndLinkageServlet",
						async:true,
						data:{
							opValue:value
						},
						success: function(data){
							data =  JSON.parse(data);
							if(data != null){//查询成功且又返回值
								//清空select下option
								$("#dorm_number").empty();
								$("#dorm_number").append("<option value=''></option>");
								for(var i = 0;i < data.length;i++){
									//添加option
									$("#dorm_number").append("<option value='"+data[i].Dorm_number+"'>"+data[i].Dorm_number+"</option>");
									console.log(data[i].Dorm_number);
								}
							}else if(data == null){//查询失败
								$("#dorm_number").empty();
								layer.msg("此楼层没有人居住！");
							}else if(data == nulls){//查询失败
								$("#dorm_number").empty();
								layer.msg("请选择楼层！");
							}
							form.render();
						}
					});
				});
				//卫生录入
				function inputHealthInfo(obj){
					$.ajax({
						type:"post",
						url:"addHealthInfoAndLinkageServlet",
						async:true,
						data:{obj:obj},
						success:function(data){
							if(data == 1){
								layer.msg("插入成功！");
							}
							
						},
						error : function(xhr, status, errMsg){
								console.log("xhr"+xhr+"status:"+status+"errMsg:"+errMsg);
							}
					});	
				}
			});
		</script>
	</body>
</html>
